<template>
  <div class="login-panel">
      <Panel>
        <template v-slot:header-slot>
          用户登录
        </template>
        <template v-slot:body-slot>
          <form id="form-login" action="/login" method="post">
            <div class="formgroup username">
              <label for="username">账号</label>
              <input type="text" name="username" id="username" v-model="formData.username">
            </div>
            <div class="formgroup password">
              <label for="password">密码</label>
              <input type="password" name="password" id="password" v-model="formData.password">
            </div>
            <div class="formgroup autologin">
              <input type="checkbox" name="autologin" id="autologin" disabled v-model="formData.autologin">
              <label for="autologin">自动登录(暂不支持)</label>
            </div>
          </form>
        </template>
        <template v-slot:footer-slot>
            <div class="formgroup button">
              <input class="btn-submit" form="form-login" type="submit" value="登录" @click.prevent="validateLogin">
              <router-link form="form-login" to="/register">注册</router-link>
            </div>
        </template>
      </Panel>
  </div>
</template>

<script>
import Panel from './common/panel'
// import axios from 'axios'
import userdata from '../data_simulate/userdata'
import chatdata from '../data_simulate/chatdata'
export default {
  data: () => {
    return {
      formData: {
        username: '',
        password: '',
        autologin: ''
      }
    }
  },
  methods: {
    validateLogin: function (event) {
      if (!/^[A-za-z]\w{5,15}/.test(this.formData.username)) {
        alert('账号需以字母开头，6-16个字符，可以使用下划线')
        // event.preventDefault()
        return
      }
      if (!/\w{6,16}/.test(this.formData.password)) {
        alert('密码需6-16个字符')
        // event.preventDefault()
        return
      }
      let isVerified = false
      let userinfo = {}
      userdata.map((item) => {
        if (item.account === this.formData.username && item.password === this.formData.password) {
          isVerified = true
          userinfo = item
        }
      })
      // console.log(userinfo)
      if (isVerified === true) {
        this.$store.commit('setMyUserInfo', userinfo)
        this.$store.commit('setMyChatRecord', chatdata[userinfo.id])
        this.$store.commit('setRightPanelType', 'welcome')
        this.$router.push('/main/my')
      }
      // axios.post('/login', this.formData).catch((err) => {
      //   alert('账号或密码不正确' + err)
      // }).then((res) => {
      //   this.$cookies.set('token', res.data.token)
      //   this.$cookies.set('last-login-time', Date.now().toLocaleString())
      //   // this.$route.push('/main/my')
      // })
    }
  },
  components: {
    Panel
  }
}
</script>

<style lang="scss">
.login-panel{
  width: 300px;
  height: fit-content;
  margin: 200px auto;
  #form-login{
    width: fit-content;
    margin: 0 auto;
    .formgroup{
      margin: 5px;
    }
    .autologin{
      font-size: 12px;
      line-height: 12px;
    }
  }
  .button{
    margin-top: 10px;
    display: flex;
    justify-content: space-around;
    align-items: center;
    .btn-submit{
      width: 60px;
    }
  }
}
</style>
